<template>
  <div class="wap-container enApplyInOrder">
    <div class="user-info">
      <div>
        <span class="c666 title">
          申请人
        </span>
        <span class="ml10">{{userInfo.nickName}}</span>
      </div>
      <div>
        <span class="c666 title">
          联系电话
        </span>
        <span class="ml10">{{userInfo.mobile}}</span>
      </div>
    </div>
    <group label-width="0.8rem" label-align="left" gutter="0">
      <selector :required="true" placeholder="请选择工作代码" title="工作类型" :value-map="['id', 'name']" v-model="formdata.workOrderType.id" @on-change=""
                :options="workOrderTypeList"></selector>
      <x-input title="任务标题" v-model="formdata.workOrderTitle"  placeholder="请输入">
      </x-input>
      <x-textarea title="任务描述" :required="true" v-model="formdata.errorDescription" :max="140" placeholder="请输入">
      </x-textarea>
      <x-textarea title="任务要求" v-model="formdata.demand" :max="140" placeholder="请输入">
      </x-textarea>
    </group>
    <section class="bottom_bar cfff" @click="createdOrder()">
      确定
    </section>
  </div>
</template>

<script>
  import {Group, XInput, XTextarea, Selector, Cell, Icon, XButton, PopupHeader, Popup, TransferDom, Radio, PopupPicker, } from 'vux'
  import UploadImage from './uploadImage.vue'
  import AMap from 'AMap'
  import AMapUI from 'AMapUI'
  export default {
    name: "ManCreatedInOrder",
    components: {
      Group,
      XInput,
      XTextarea,
      Selector,
      Cell,
      Icon,
      XButton,
      PopupHeader,
      Popup,
      Radio,
      UploadImage,
      PopupPicker,
    },
    directives: {
      TransferDom
    },
    data() {
      return {
        formdata: {
          engineer: {
            id: ''
          },
          workOrderTitle: '',
          demand: '',
          errorDescription: '',
          workOrderType: {
            id: ''
          }
        },
        userInfo: {},
        workOrderTypeList: [],
        engineerList: [],
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      init: function () {
        this.$getUserInfo().then(user=> {
          this.userInfo = user
          this.formdata.engineer.id =  user.id

          this.getFWLXList()
          this.getGCSList()
        })
      },
      getFWLXList: function () {
        this.$http.get('/work/api/workOrderType?serviceType=IN').then(res => {
            this.workOrderTypeList = res.data.data.rows
            console.log(this.workOrderTypeList)
          }
        )
      },
      getGCSList: function () {
        //获取工程师
        this.$http.get('/account/api/users?noPage=true&companyId='+this.userInfo.companyBean.id).then(res => {
          console.log(res)
          this.engineerList = res.data.data
        })
      },
      createdOrder: function () {
        console.log(this.formdata)
        // 判断是否有工作代码
        if (this.formdata.workOrderType.id == ''){
          this.$vux.alert.show({
            title: '提示',
            content: '请选择工作类型'
          })
          return false
        }
        // 判断是否有设备id
        if (this.formdata.workOrderTitle == ""){
          this.$vux.alert.show({
            title: '提示',
            content: '请填写任务标题'
          })
          return false
        }
        // 判断是否有服务对象id
        if (this.formdata.errorDescription == ""){
          this.$vux.alert.show({
            title: '提示',
            content: '请填写任务描述'
          })
          return false
        }
        this.$http.post('/work/api/request', this.formdata).then(res=>{
          this.$vux.toast.show({
            text: '创建成功'
          })
          let that = this
          setTimeout(function () {
            that.$router.push({path: '/engineer/enMyOrders'})
          },1000)
        })

      },
      showPopup: function () {
        this.createPopup = !this.createPopup
      },
    }
  }
</script>

<style lang="less">
  .wap-container {
    font-size: 0.13rem;
  }
  .enApplyInOrder {
    .user-info{
      display: flex;
      justify-content: space-between;
      height: 0.4rem;
      background-color: #fff;
      line-height: 0.4rem;
      padding: 0 0.2rem 0 0.15rem;
      margin-bottom: 0.1rem;
    }
    .top {
      padding-bottom: 0.15rem;
      box-shadow: 0 0 0.04rem 0 #ebebeb;
    }
    .mess-item {
      margin-top: 0.1rem;
      /*height: 0.25rem;*/
      line-height: 0.25rem;
      width: 100%;
    }
    .top .mess-item:last-child {
      height: 0.6rem;
    }
    .mess-item img {
      width: 0.07rem;
      margin-right: 0.03rem;
      vertical-align: super;
    }
    .mess-item .title-box {
      width: 0.52rem;
      display: flex;
      justify-content: space-between;
    }
    .selectStyle{
      margin-left: 0.18rem;
      -webkit-appearance: none;
      border: 0;
      outline: 0;
      background-color: transparent;
      width: 2.75rem;
      padding-right: 0.2rem;
      font-size: 0.13rem;
      line-height: 0.25rem;
      position: relative;
      z-index: 1;
      background: url("~assets/images2/icon_zuojian@2x.png") no-repeat 2.6rem center;
      background-size: 0.06rem 0.1rem;
      border-radius: 0.02rem;
      border: #dfdfdf 1px solid;
      span{
        float: right;
        font-size: 0.1rem;
      }
    }
    .mess-item .title {
      width: 0.52rem;
    }
    #file{
      margin-left: 0.18rem;
      position: relative;
      top: -0.25rem;
      opacity: 0;
    }
    .weui-textarea{
      font-size: 0.13rem;
    }
    .weui-textarea-counter {
      font-size: 0.1rem;
      padding-right: 0.05rem;
    }
    .bottom {
      border-radius: 0.04rem;
      box-shadow: 0 0.02rem 0.04rem 0 #ebebeb;
    }
    .bottom-title {
      padding-top: 0.08rem;
      height: 0.43rem;
      line-height: 0.35rem;
      font-size: 0.15rem;
      text-align: center;
      border-bottom: solid 1px #ebebeb;
    }
    .repair-type {
      display: flex;
      justify-content: space-around;
      margin-top: 0.12rem;
      font-size: 0.15rem;
    }
    .repair-item {
      display: flex;
    }

    .repair-date {
      padding: 0 0.58rem;
      margin-top: 0.37rem;
      display: flex;
      justify-content: space-between;
    }

    .bottom_bar {
      width: 100%;
      background: #42a3fd;
      line-height: 0.43rem;
      font-size: 0.15rem;
      text-align: center;
    }
    .weui-vcode {
      background: #fff;
      .weui-cell__bd {
        padding-right: 10px;
        > input {
          border-right: 1px solid gainsboro;
        }
      }
      .fa-search {
        font-size: 0.18rem;
        color: #3FBCFC;
      }
    }
    .weui-cells {
      font-size: 0.13rem;
      input{
        height: 31px;
        line-height: 31px;
      }
      .vux-selector.weui-cell_select {
        padding: 10px 15px;
        .weui-select {
          height: 31px;
          line-height: 31px;
        }
      }
      .weui-cell_select .weui-cell__bd:after {
        border-color: #3FBCFC;
        right: 22px;
      }
      .weui-cell_access {
        .child {
          position: absolute;
          right: 35px;
          font-size: 0.15rem;
        }
        .weui-cell__ft:after {
          border-color: #3FBCFC;
          right: 7px;
        }
      }
    }
    .vux-x-input, .weui-cell_select, .vux-x-textarea {
      .weui-cell__bd {
        padding: 2px;
        border: 0.01rem solid #E5E5E5;
        border-radius: 5px;
      }
    }

    .weui-cell__ft {

      .vux-x-input-right-full {
        margin-left: 0px;
        img {
          height: 12px;
          margin-top: 15px;
          margin-left: -12px;
          margin-right: 5px;
        }
      }
    }
  }
</style>

